<template>
  <div class="RightBox">
    <div class="reallosd">
      <div class="title">实时负荷监测</div>
      <div class="miaoshu">
        本月最大负荷 <span class="jin num">{{ entityvalue.loadCurMonthMax }}</span> <span class="jin">kWh</span>&nbsp;&nbsp;
        上月最大负荷 <span class="zuo num">{{ entityvalue.loadPreMonthMax }}</span> <span class="zuo">kWh</span>
      </div>
      <div class="realtime" ref="realtimerefs"></div>
    </div>
    <div class="reallosd">
      <div class="title">主要用电设备(TOP5)</div>
      <div class="topfive" ref="topfiverefs"></div>
    </div>
    <div class="reallosd">
      <div class="title">月能耗</div>
      <div class="topfive" ref="monthrefs"></div>
    </div>
    <div class="reallosd">
      <div class="title">发电情况</div>
      <div class="topfive" ref="fadianrefs"></div>
    </div>
  </div>
</template>
<script>
import { getfuheapi } from '@/api/ElectricalDistribution/layout'
import { getresltimeechart ,getmonthenergyechart,getrifadianechart} from './lineEchart'
import {gettopfiveechart} from './preEchart'
export default {
  name: 'CallPoliceRightBox',

  data() {
    return {
      entityvalue:{}
    };
  },

  async mounted() {
    const { data: { entity } } = await getfuheapi({ subburo: '88000341' })
    this.entityvalue=entity
    getresltimeechart(this,this.$refs.realtimerefs,entity)
    gettopfiveechart(this, this.$refs.topfiverefs)
    getmonthenergyechart(this, this.$refs.monthrefs)
    getrifadianechart(this, this.$refs.fadianrefs)
  },

  methods: {
    
  },
};
</script>
<style lang="scss" scoped>
.RightBox{
  .reallosd{
    height: 230px;
    margin-bottom: 10px;
    .miaoshu{
      padding-left: 10px;
      font-size: 14px;
      color: #fff;
      .jin{
        color: #18f2ce;
      }
      .zuo{
        color: #5996ff;
      }
      .num{
        font-size: 20px;
      }
    }
    .realtime{
      height: 65%;
    }
    .topfive{
      height: 78%;
    }
  }
}
.title {
  height: 40px;
  color: #fff;
  line-height: 40px;
  background: linear-gradient(to right, #0b528a, #070e27) center center no-repeat;
  padding-left: 10px;
  margin-bottom: 10px;
}
::v-deep ::-webkit-scrollbar {
    display: none;
}
</style>